<template>
  <div style="width: 600px;position: absolute;top: 180px;left: 50px">
    <h3 style="color: #9495c5">选择要处理的预约对象</h3>
    <div>
      <el-carousel :autoplay="autoPlay" :interval="2000" height="400px" type="card">
        <el-carousel-item v-for="(item,index) in bookingStudentInfo" :key="item.id">
          <div @click="setStudent(index)">
            <ShowStudentInfo :info="item"></ShowStudentInfo>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div style="position: absolute;top: -100px;left: 750px">
      <CheckCard ref="check"></CheckCard>
    </div>
  </div>
</template>

<script>
import ShowStudentInfo from '../common/check/ShowStudentInfo'
import CheckCard from '../common/check/CheckCard'

export default {
  name: 'StudentBooking',
  components: {ShowStudentInfo, CheckCard},
  data () {
    return {
      bookingStudentInfo: [{
        id: '',
        acc: '',
        jsxm: '',
        topic: {
          id: '',
          name: ''
        },
        zxzt: '',
        bz: '',
        yyrq: '',
        availTime: {
          id: '',
          start: '',
          end: ''
        },
        other: ' ',
        createtime: '',
        state: ''
      }],
      backInfo: [],
      autoPlay: true,
      studentName: ''
    }
  },
  mounted () {
    var _this = this
    _this.$axios.get('/teacher/check/' + this.$store.state.acc + '/process').then(resp => {
      if (resp && resp.status === 200) {
        this.bookingStudentInfo = resp.data
      }
    }).catch(failResponse => {
      alert('服务器响应请求失败！')
    })
  },
  methods: {
    setStudent (index) {
      this.autoPlay = !this.autoPlay
      this.backInfo = this.bookingStudentInfo[index]
      this.$refs.check.checkForm = this.backInfo
    }
  }
}
</script>

<style scoped>
h3 {
  margin: 20px;
}

.el-carousel__item {
  border-radius: 5px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #FFFFFF;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #f0f0f8;
}
</style>
